<template>
  <div>
    <!-- 页面标题区域 -->
    <section class="py-8 mb-8 relative overflow-hidden">
      <div class="container max-w-7xl mx-auto px-4">
        <h1 class="text-4xl font-bold tracking-tight mb-4 company-title">不靠谱公司名单</h1>
        <p class="text-gray-600 dark:text-gray-400 max-w-3xl company-description">
          这里列出了各地区被举报的不靠谱公司，帮助求职者避开职场雷区。所有内容均来自用户投稿，仅供参考。
        </p>
      </div>
      <!-- 背景装饰 -->
      <div
        class="absolute top-0 right-0 w-32 h-32 bg-primary-100 dark:bg-primary-900 rounded-full opacity-20 decoration-bubble">
      </div>
      <div
        class="absolute bottom-0 left-0 w-40 h-40 bg-secondary-100 dark:bg-secondary-900 rounded-full opacity-20 decoration-bubble">
      </div>
    </section>

    <!-- 筛选器 -->
    <div
      class="bg-white dark:bg-gray-950 rounded-lg shadow-sm border border-gray-200 dark:border-gray-800 p-6 mb-8 filter-container max-w-7xl mx-auto transition-all duration-300 hover:shadow-md">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div>
          <label for="region" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">地区</label>
          <Select v-model="filters.region">
            <SelectTrigger class="w-full">
              <SelectValue placeholder="选择地区" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="">全部地区</SelectItem>
              <SelectItem value="北京">北京</SelectItem>
              <SelectItem value="上海">上海</SelectItem>
              <SelectItem value="广州">广州</SelectItem>
              <SelectItem value="深圳">深圳</SelectItem>
              <SelectItem value="杭州">杭州</SelectItem>
              <SelectItem value="成都">成都</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div>
          <label for="tag" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">问题类型</label>
          <Select v-model="filters.tag">
            <SelectTrigger class="w-full">
              <SelectValue placeholder="选择问题类型" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="">全部类型</SelectItem>
              <SelectItem value="薪资问题">薪资问题</SelectItem>
              <SelectItem value="加班文化">加班文化</SelectItem>
              <SelectItem value="虚假承诺">虚假承诺</SelectItem>
              <SelectItem value="内部管理">内部管理</SelectItem>
              <SelectItem value="隐私侵犯">隐私侵犯</SelectItem>
              <SelectItem value="裁员风波">裁员风波</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div>
          <label for="sort" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">排序方式</label>
          <Select v-model="sortOption">
            <SelectTrigger class="w-full">
              <SelectValue placeholder="选择排序方式" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="latest">最新添加</SelectItem>
              <SelectItem value="rating">不靠谱指数</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div>
          <label for="search" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">搜索</label>
          <div class="relative">
            <Input v-model="searchQuery" type="text" placeholder="搜索公司名称..." />
            <div class="absolute inset-y-0 right-0 flex items-center pr-3">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 公司列表 -->
    <div class="max-w-7xl mx-auto px-4">
      <div class="grid grid-cols-1 gap-8">
        <div v-for="(company, index) in filteredCompanies" :key="company.id"
          class="transform hover:-translate-y-1 transition-all duration-300 company-card" :data-index="index">
          <Card class="overflow-hidden hover:shadow-lg">
            <CardContent class="p-6">
              <div class="flex flex-col md:flex-row md:items-start">
                <div class="flex-1">
                  <div class="flex items-center justify-between mb-4">
                    <div>
                      <CardTitle class="mb-2">{{ company.name }}</CardTitle>
                      <div class="flex items-center mt-2 space-x-2">
                        <Badge :variant="getTagVariant(company.tag)">
                          {{ company.tag }}
                        </Badge>
                        <span class="text-sm text-gray-500 dark:text-gray-400 flex items-center">
                          <span class="mr-1 text-yellow-500">⚠️</span>
                          不靠谱指数: {{ company.rating }}/10
                        </span>
                      </div>
                    </div>
                    <div class="hidden md:block">
                      <NuxtLink :to="`/companies/${company.id}`" class="transform hover:scale-105 transition-transform">
                        <Button variant="outline" size="sm">查看详情</Button>
                      </NuxtLink>
                    </div>
                  </div>
                  <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-3">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24"
                      stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                    {{ company.location }}
                  </div>
                  <p class="text-gray-600 dark:text-gray-400 mb-6 line-clamp-3">
                    {{ company.description }}
                  </p>
                  <div class="mt-4">
                    <div class="flex flex-wrap gap-2">
                      <Badge v-for="(incident, index) in company.incidents.slice(0, 3)" :key="index" variant="outline"
                        class="transform hover:scale-105 transition-transform">
                        {{ incident }}
                      </Badge>
                      <Badge v-if="company.incidents.length > 3" variant="outline">
                        +{{ company.incidents.length - 3 }} 更多
                      </Badge>
                    </div>
                  </div>
                  <div class="mt-6 md:hidden">
                    <NuxtLink :to="`/companies/${company.id}`" class="w-full">
                      <Button variant="outline" class="w-full">查看详情</Button>
                    </NuxtLink>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

      <!-- 分页 -->
      <div class="mt-10 flex justify-center">
        <nav class="flex items-center space-x-2">
          <Button variant="outline" :disabled="currentPage === 1" @click="currentPage--">
            上一页
          </Button>
          <Button v-for="page in totalPages" :key="page" :variant="currentPage === page ? 'default' : 'outline'"
            @click="currentPage = page">
            {{ page }}
          </Button>
          <Button variant="outline" :disabled="currentPage === totalPages" @click="currentPage++">
            下一页
          </Button>
        </nav>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue';
import { useNuxtApp } from '#app';
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
import { Card, CardContent, CardTitle } from '@/components/ui/card'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select'

// 获取GSAP实例
const { $gsap } = useNuxtApp();

// 筛选和排序状态
const searchQuery = ref('');
const sortOption = ref('latest');
const currentPage = ref(1);
const itemsPerPage = 5;

const filters = ref({
  region: '',
  tag: ''
});

// 模拟数据
const companies = [
  {
    id: '1',
    name: '薪水拖欠集团',
    tag: '薪资问题',
    location: '北京市朝阳区',
    description: '该公司以各种理由拖欠员工薪水，平均拖欠时间达到3个月，员工投诉无门，离职后薪资更是一分不发。',
    rating: 9,
    incidents: ['拖欠薪资', '无故降薪', '离职不付尾款', '克扣提成']
  },
  {
    id: '2',
    name: '996福报科技',
    tag: '加班文化',
    location: '上海市浦东新区',
    description: '该公司实行严格的996工作制，甚至经常性007，却不支付任何加班费。管理层经常强调"加班是福报"，拒绝加班者会被穿小鞋。',
    rating: 8.5,
    incidents: ['强制加班', '不付加班费', '精神控制', '变相惩罚']
  },
  {
    id: '3',
    name: '画饼许愿有限公司',
    tag: '虚假承诺',
    location: '广州市天河区',
    description: '入职前承诺的各种福利待遇统统落空，股权激励、年终奖、调薪承诺全是画饼。员工离职率高达85%，却依然无动于衷。',
    rating: 7.8,
    incidents: ['虚假承诺', '高离职率', '股权陷阱', '福利缩水']
  },
  {
    id: '4',
    name: '甩锅专业户集团',
    tag: '内部管理',
    location: '深圳市南山区',
    description: '公司内部管理混乱，出了问题全部甩锅给基层员工。高管们擅长互相推诿责任，导致项目经常延期，客户投诉不断。',
    rating: 8.2,
    incidents: ['管理混乱', '责任甩锅', '客户投诉', '项目延期']
  },
  {
    id: '5',
    name: '监控至上数字科技',
    tag: '隐私侵犯',
    location: '杭州市西湖区',
    description: '公司在办公区域安装大量监控，甚至在茶水间和休息区也不例外。要求员工安装特殊软件监控工作电脑和手机使用情况。',
    rating: 7.5,
    incidents: ['过度监控', '隐私侵犯', '强制安装监控软件', '违规使用数据']
  },
  {
    id: '6',
    name: '变相裁员创新企业',
    tag: '裁员风波',
    location: '成都市高新区',
    description: '为了避免支付补偿金，该公司采取各种手段逼迫员工主动离职，包括无故调岗、降薪、孤立员工等非人性化做法。',
    rating: 9.2,
    incidents: ['变相裁员', '无理调岗', '故意刁难', '精神压力']
  },
  {
    id: '7',
    name: '职场PUA科技',
    tag: '内部管理',
    location: '北京市海淀区',
    description: '管理层普遍使用PUA手段控制员工，通过贬低、否定员工价值来控制团队。员工普遍自信心受损，工作氛围极其紧张。',
    rating: 8.9,
    incidents: ['职场PUA', '精神控制', '贬低员工', '高压管理']
  },
  {
    id: '8',
    name: '资本收割机金融',
    tag: '虚假承诺',
    location: '上海市静安区',
    description: '以高薪诱惑吸引人才，入职后却发现KPI几乎不可能完成，基本工资极低。大多数员工拿不到承诺的高薪，却要承受巨大工作压力。',
    rating: 7.6,
    incidents: ['绩效陷阱', '高KPI压榨', '变相降薪', '离职率高']
  }
];

// 过滤和排序数据
const filteredCompanies = computed(() => {
  let result = [...companies];

  // 应用筛选
  if (filters.value.region) {
    result = result.filter(company => company.location.includes(filters.value.region));
  }

  if (filters.value.tag) {
    result = result.filter(company => company.tag === filters.value.tag);
  }

  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase();
    result = result.filter(company =>
      company.name.toLowerCase().includes(query) ||
      company.description.toLowerCase().includes(query)
    );
  }

  // 应用排序
  if (sortOption.value === 'rating') {
    result.sort((a, b) => b.rating - a.rating);
  }

  // 分页
  const startIndex = (currentPage.value - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  return result.slice(startIndex, endIndex);
});

// 计算总页数
const totalPages = computed(() => {
  let filteredTotal = companies.length;

  if (filters.value.region) {
    filteredTotal = companies.filter(company => company.location.includes(filters.value.region)).length;
  }

  if (filters.value.tag) {
    filteredTotal = companies.filter(company => company.tag === filters.value.tag).length;
  }

  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase();
    filteredTotal = companies.filter(company =>
      company.name.toLowerCase().includes(query) ||
      company.description.toLowerCase().includes(query)
    ).length;
  }

  return Math.ceil(filteredTotal / itemsPerPage);
});

// 根据标签返回对应的variant
const getTagVariant = (tag: string) => {
  const variantMap: Record<string, "default" | "destructive" | "outline" | "secondary"> = {
    '薪资问题': 'destructive',
    '加班文化': 'secondary',
    '虚假承诺': 'secondary',
    '内部管理': 'default',
    '隐私侵犯': 'secondary',
    '裁员风波': 'outline',
  };

  return variantMap[tag] || 'default';
};

// 监听筛选条件变化，重置到第一页
watch([filters, searchQuery], () => {
  currentPage.value = 1;
});

// 使用GSAP添加动画效果
onMounted(() => {
  try {
    // 先确保元素可见（以防GSAP出错）
    document.querySelectorAll('.company-title, .company-description, .filter-container, .company-card')
      .forEach(el => {
        (el as HTMLElement).style.opacity = '1';
      });

    // 标题和描述动画
    if ($gsap) {
      $gsap.from('.company-title', {
        opacity: 0,
        y: 20,
        duration: 0.8,
        ease: 'power2.out'
      });

      $gsap.from('.company-description', {
        opacity: 0,
        y: 20,
        duration: 0.8,
        delay: 0.2,
        ease: 'power2.out'
      });

      // 筛选器动画
      $gsap.from('.filter-container', {
        opacity: 0,
        y: 20,
        duration: 0.8,
        delay: 0.4,
        ease: 'power2.out'
      });

      // 公司卡片动画
      $gsap.from('.company-card', {
        opacity: 0,
        y: 40,
        duration: 0.8,
        stagger: 0.15, // 每个卡片依次显示
        delay: 0.6,
        ease: 'power2.out'
      });

      // 背景装饰动画
      $gsap.to('.decoration-bubble', {
        x: i => (Math.random() * 30 - 15),
        y: i => (Math.random() * 30 - 15),
        scale: i => (Math.random() * 0.2 + 0.9),
        duration: 4,
        repeat: -1,
        yoyo: true,
        ease: 'power1.inOut'
      });
    }
  } catch (error) {
    console.error('动画加载失败', error);
    // 确保元素可见（出错时的备用方案）
    document.querySelectorAll('.company-title, .company-description, .filter-container, .company-card')
      .forEach(el => {
        (el as HTMLElement).style.opacity = '1';
      });
  }
});
</script>

<style scoped>
/* 删除opacity: 0设置，确保元素默认可见 */
/* 
.company-title,
.company-description,
.filter-container,
.company-card {
  opacity: 0;
}
*/

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}
</style>